﻿@model MagicKit<string>
<div class="pwd-reset pwd-reset-by-email">
    <div class="pwd-reset-header">
        <h3>
            设置新密码<small></small></h3>
        <p class="help-block">
            asdf</p>
    </div>
    <div class="pwd-reset-body">
        @if (Model.Status)
        {
            <div class="row">
                <div class="col-md-offset-1 col-md-7">
                    <form id="form-pwd-reset-by-email" class="form-horizontal" method="post" autocomplete="off">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <p id="pwd-reset-message" class="form-control-static">
                                &nbsp;</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            电子邮箱</label>
                        <div class="col-md-10">
                            <p class="form-control-static">
                                @(Model.Data)</p>
                        </div>
                    </div>
                    <div id="form-group-for-password" class="form-group">
                        <label for="password" class="col-md-2 control-label" data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）"
                            data-original-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                            登录密码</label>
                        <div class="col-md-10">
                            <input id="password" name="password" type="password" class="form-control" maxlength="12"
                                autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                onpaste="return false" required="required" placeholder="请输入您的登录密码" />
                            <p id="help-block-for-password" class="help-block">
                                6-12位，至少两个字母、两个数字、一个特殊字符！</p>
                        </div>
                    </div>
                    <div id="form-group-for-repassword" class="form-group">
                        <label for="repassword" class="col-md-2 control-label" data-original-title="温馨提醒"
                            data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）" data-placement="top"
                            data-trigger="hover" data-rel="popover">
                            确认密码</label>
                        <div class="col-md-10">
                            <input id="repassword" name="repassword" type="password" class="form-control" maxlength="12"
                                autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                onpaste="return false" required="required" placeholder="请再次输入您的登录密码" />
                            <p id="help-block-for-repassword" class="help-block">
                                6-12位，至少两个字母、两个数字、一个特殊字符！
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-3">
                            <button id="btn-pwd-reset" class="btn btn-primary btn-lg" type="submit" data-default-text="设置新密码"
                                data-loading-text="提交数据中...">
                                设置新密码</button>
                        </div>
                        <div class="col-md-5">
                        </div>
                    </div>
                    </form>
                </div>
                <div class="col-md-4">
                </div>
            </div>
        }
        else
        {
            <p>@Model.Message</p>
        }
    </div>
    <div class="pwd-reset-footer"> <p class="center-block">
            您还可以拨打帮助热线：021-61065336，以获取人工帮助
        </p>
    </div>
</div>
@section js{
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="http://static.ayatta.com/js/jquery.validate.extend.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[data-rel="popover"]').popover();

            $('#form-pwd-reset-by-email').validate({
                rules: { 'password': { required: true, password: true }, 'repassword': { required: true, password: false, equalTo: "#password"} },
                messages: { password: { required: '请输入您的登录密码！', 'password': '6-12位，至少两个字母、两个数字、一个特殊字符！' }, 'repassword': { required: '请再次输入您的登录密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！', equalTo: "两次输入的密码不一致！"} },
                submitHandler: function (form) {
                    $('#btn-pwd-reset').button('loading');
                    var param = $(form).serialize();
                    $.post(form.action, param, function (result) {
                        if (result.Status == true) {
                            $("#pwd-reset-message").removeClass('text-danger').addClass('text-success').html('设置密码成功！');
                        } else {
                            $('#btn-pwd-reset').button('default');
                            $("#pwd-reset-message").addClass('text-danger').html(result.Message);
                            setTimeout(function () {
                                $("#pwd-reset-message").removeClass('text-danger').html('&nbsp;');
                            }, 2000);
                        }
                    });
                    return false;

                },
                validClass: "success",
                errorClass: "invalid",
                errorElement: "span",
                errorPlacement: function (error, element) {
                    var id = $(element).attr('id');
                    $("#help-block-for-" + id).html(error);
                },
                highlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(validClass).addClass(errorClass);
                    $("#form-group-for-" + id).removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(errorClass).addClass(validClass);
                    $("#help-block-for-" + id).html('&nbsp;');
                    $("#form-group-for-" + id).removeClass('has-error').addClass('has-success');
                }
            });
        });
        
    </script>
}
